require(['/assets/js/require.config.js'], function(config) {
  var r = require;
  r.config(config);

  r(['refresh']);

define('jquery.lightbox', ['jquery'], function($) {

  var lightbox = function() {
    var self = this;
    //create mask and 
    this.lightboxMask = $('<div id="lightbox-mask"></div>');
    this.popupWin = $('<div id="lightbox-popup">');


    this.bodyNode = $(document.body);

    this.renderDom();

    this.picView = this.popupWin.find('.lightbox-pic-view');
    this.popupPic = this.popupWin.find('.lightbox-img');

    this.picCaptionArea = this.popupWin.find('.lightbox-pic-caption');
    this.nextBtn = this.popupWin.find('.lightbox-next-btn');
    this.prevBtn = this.popupWin.find('.lightbox-prev-btn');

    this.captionText = this.popupWin.find('.lightbox-pic-desc');

    this.currentIndex = this.popupWin.find('.lightbox-of-index');
    this.closeBtn = this.popupWin.find('.lightbox-close-btn');




    this.groupName = null;
    this.groupData = [];
    this.bodyNode.delegate('.lightbox, *[data-role=lightbox]', 'click', function(eve) {
      // stop event maopao
      eve.stopPropagation();

      var currentGroupName = $(this).data('group');
      if (currentGroupName != self.groupName) {
        self.groupName = currentGroupName;

        self.getGroup();
      }

      self.initPop($(this));
    })


    this.lightboxMask.click(function() {
      $(this).fadeOut();
      self.popupWin.fadeOut();
    });

    this.closeBtn.click(function() {
      self.lightboxMask.fadeOut();
      self.popupWin.fadeOut();
    });

    this.nextBtn.hover(function() {
      if (!$(this).hasClass('disabled') && self.groupData.length > 1) {
        $(this).addClass('lightbox-next-btn-show');
      }
    }, function() {
      if (!$(this).hasClass('disabled') && self.groupData.length > 1) {
        $(this).removeClass('lightbox-next-btn-show');
      }
    }).click(function(eve) {
      eve.stopPropagation();
      if (!$(this).hasClass('disabled')) {
        self.goTo('next');
      }
    });

    this.prevBtn.hover(function() {
      if (!$(this).hasClass('disabled') && self.groupData.length > 1) {
        $(this).addClass('lightbox-prev-btn-show');
      }
    }, function() {
      if (!$(this).hasClass('disabled') && self.groupData.length > 1) {
        $(this).removeClass('lightbox-prev-btn-show');
      }
    }).click(function(eve) {
      if (!$(this).hasClass('disabled') && self.flag) {
        self.flag = false; 
        eve.stopPropagation();
        self.goTo('prev');
      }
    });
  }

  lightbox.prototype = {
    goTo: function(dir) {
      if (dir === 'prev') {
        this.index--;
        if (this.index <= 0) {
          this.prevBtn.addClass('disabled').removeClass('lightbox-prev-btn-show');
        }
        if (this.index != this.groupData.length - 1) {
          this.nextBtn.removeClass('disabled');
        }
        var src = this.groupData[this.index].src;
        this.loadPicSize(src);
      } else {
        this.index++;
        if (this.index >= this.groupData.length - 1) {
          this.nextBtn.addClass('disabled').removeClass('lightbox-next-btn-show');
        }
        if (this.index != 0) {
          this.prevBtn.removeClass('disabled');
        }
        var src = this.groupData[this.index].src;
        this.loadPicSize(src);
      }
    },
    showMAaskAndPopup: function(src, id) {
      var self = this;
      this.popupPic.hide();
      this.picCaptionArea.hide();

      this.lightboxMask.fadeIn();

      var winWidth = $(window).width(),
        winHeight = $(window).height();

      this.picView.css({
        width: winWidth / 2,
        height: winHeight / 2
      });

      var viewHeight = winHeight / 2 + 10;

      this.popupWin.fadeIn().css({
        width: winWidth / 2 + 10,
        height: winHeight / 2 + 10,
        marginLeft: -(winWidth / 2 + 10) / 2,
        top: -viewHeight
      }).animate({
        top: (winHeight - viewHeight) / 2
      }, function() {
        self.loadPicSize(src);
      });

      this.index = this.getIndex(id);

      var groupDataLength = this.groupData.length;

      if (groupDataLength > 1) {
        if (this.index === 0) {
          this.prevBtn.addClass('disabled');
          this.nextBtn.removeClass('disabled');
        } else if (this.index === groupDataLength - 1) {
          this.prevBtn.removeClass('disabled');
          this.nextBtn.addClass('disabled');
        }
      }
    },
    loadPicSize: function(src) {
      var self = this;

      this.popupPic.css({
        width:'auto',
        height:'auto'
      }).hide();
      this.preLoading(src, function(picWidth, picHeight) {
        self.popupPic.attr('src', src);
        self.changePic(picWidth, picHeight);

      });
    },
    changePic: function(width, height) {
      var self = this;

      var winWidth = $(window).width(),
        winHeight = $(window).height();

      //如果图片的宽高大于浏览器视口
      var scale = Math.min(winHeight / (height + 10), winWidth / (width + 10));

      height = scale * height;
      width = scale * width;

      this.picView.animate({
        width: width - 10,
        height: height - 10
      });

      this.popupWin.animate({
        width: width,
        height: height,
        marginLeft: -(width / 2),
        top: (winHeight - height) / 2
      }, function() {
        self.popupPic.css({
          width: width - 10,
          height: height - 10
        }).fadeIn();
        self.picCaptionArea.fadeIn();
        self.flag = true;
      })

      this.captionText.text(this.groupData[this.index].caption);
      this.currentIndex.text('当前索引：' + this.index + '/' + this.groupData.length);
    },
    preLoading: function(src, callback) {
      var img = new Image();
      if (!!window.ActiveXObject) {
        img.onreadystatechange = function() {
          if (this.readyState == 'complete') {
            callback(img.width, img.height);
          }
        }
      } else {
        img.onload = function() {
          callback(img.width, img.height)
        };
      }
      img.src = src;
    },
    getIndex: function(currentId) {
      var index = 0;
      $(this.groupData).each(function(i) {
        index = i;
        if (this.id === currentId) {
          return false;
        }
      });
      return index;
    },
    initPop: function(currentObj) {
      var self = this;
      var sourceSrc = currentObj.data('source');
      var currentId = currentObj.data('id');

      this.showMAaskAndPopup(sourceSrc, currentId);
    },
    getGroup: function() {
      var self = this;

      self.groupData.length = 0;

      var groupList = this.bodyNode.find('[data-group=' + this.groupName + ']');
      groupList.each(function() {
        self.groupData.push({
          src: $(this).data('source'),
          id: $(this).data('id'),
          caption: $(this).data('caption')
        });
      });

    },
    renderDom: function() {
      var strDom = '<div class="lightbox-pic-view">' + '  <span class="lightbox-btn lightbox-prev-btn"></span>' + '  <img src="img/2-2.jpg" class="lightbox-img" alt="">' + '  <span class="lightbox-btn lightbox-next-btn"></span>' + '</div>' + '<div class="lightbox-pic-caption">' + '  <div class="lightbox-caption-area">' + '    <p class="lightbox-pic-desc">title</p>' + '    <span class="lightbox-of-index">0/0</span>' + '  </div>' + '  <span class="lightbox-close-btn"></span>' + '</div>';
      this.popupWin.html(strDom);
      this.bodyNode.append(this.lightboxMask);
      this.bodyNode.append(this.popupWin);
    }
  }


  $.lightbox = lightbox;


})

require(['jquery', 'jquery.lightbox'], function($) {
  var lightbox = new $.lightbox();
})


});

